<!DOCTYPE html>
<!-- sRGB blue, progressively reduced in JzCzHz Chroma to a neutral grey -->
<textarea id="textarea" style="width: 100%; min-height: 10em;"></textarea>
<object data id="preview"></object>
<!-- <script src="color.js" type="module"></script> -->
<script type="module">
import Color from "https://colorjs.io/color.js";
const scale = 131.2/0.156; // LCH chroma to JzCzHz chroma scaling factor
let rects = [];
let reds = [];
let greens = [];
let blues = [];
let color = new Color("blue");
let start = color.jzczhz.chroma;
for (let i = start * scale; i >=-10; i--) {
    color.jzczhz.chroma = i/scale;
    rects.push(`<rect width="1.1" height="10" x="${i}" fill="${color}" />`);
    let ug = Color.spaces.srgb.toLinear(color.coords);
    reds.push(`${i},${40 - (ug[0]*25)}`);
    greens.push(`${i},${40 - (ug[1]*25)}`);
    blues.push(`${i},${40 - (ug[2]*25)}`);
    console.log(color.coords, color.jzczhz);
}
let markup = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -4 150 60">
    <desc>Show a gradient from sRGB blue,
in JzCzHz,
as Chroma is reduced from the max value (0.156) to near-zero
demonstrating less purpling mid-way compared to LCH.
1.1 is an egregious hack to avoid limited subpixel precision compositing artifacts
</desc>
${rects.join("\n")}
<rect width="132" height="25" y="15" fill="none" stroke="grey" stroke-width="0.2"/>
<polyline fill="none" stroke-width="0.2" stroke="red" points="${reds.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="green" points="${greens.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="blue" points="${blues.join(" ")}" />
</svg>`;
textarea.value = markup;
preview.data = `data:image/svg+xml,${encodeURIComponent(markup)}`;
</script>